•

NaN / NaN
Back
KE
Skip navigation
Search with your voice
Notifications
Shopping cart
KE
Home
Home
Explore
Explore
Shorts
Shorts
Subscriptions
Subscriptions
Library
Library
All Highlight films Live CSS Contemporary Worship Music Belief Thoughts Neymar Music Public speaking Premier League History Computer Application Debates Kenya Television Network Gaming Track and field Comedy Recently uploaded Watched New to you
VISIT SITE
New Coupon - Up to 95% Off Courses
Learn Machine Learning, Data Science, R, Python, Django, & more!
Ad
$11.99 Course Sale
VISIT SITE
6:46 Now playing

Goals that Can't be Repeated in Football

iLance7i
iLance7i
Verified
•
3.5M views 2 months ago
1:35:39 Now playing

Tailwind Crash Course | Project From Scratch

Traversy Media
Traversy Media
Verified
•
172K views 4 months ago
39:52 Now playing

Unlocking the Old Testament Part 6 - Genesis 5

David Pawson - Official
David Pawson - Official
•
149K views 7 years ago
9:14 Now playing

20 FUNNIEST OLYMPIC FAILS

Hyperloop
Hyperloop
•
4.4M views 1 year ago
6:21 Now playing

Prof. Ben Sihanya claims the numbers in many form 34As/ 34Bs don't add up in a substantive manner

NTV Kenya
NTV Kenya
•
2.8K views 54 minutes ago
5:13 Now playing

WAISRAELI DONE BY KING DAVID CHOIR - CHEPLASKEI (Filmed by GSR STUDIO 0729369784)

King David's Choir CHEPLASKEI SDA
King David's Choir CHEPLASKEI SDA
•
676 views 3 days ago
5:03 Now playing

Never Celebrate a Goal This Way

BRAIN TIME
BRAIN TIME
Verified
•
14M views 3 years ago
Now playing

THURSDAY SECRETS 18TH AUGUST 2022 - APOSTLE JOSHUA SELMAN | Commanding Your Morning

CHRISTOCENTRIC MESSAGE
CHRISTOCENTRIC MESSAGE
•
263 watching
PREMIERE
20:47 Now playing

15 Craziest Natural Phenomena Recorded On Camera

The Finest
The Finest
Verified
•
6.1M views 1 year ago
5:12 Now playing

Chebukati says the 4 commissioners wanted to force presidential re-run

Citizen TV Kenya
Citizen TV Kenya
Verified
•
175K views 11 hours ago
11:52 Now playing

This Is How Ngolo Kante Spends His Millions

World Revealed
World Revealed
•
993K views 5 months ago
15:05 Now playing

This Will Change Your Mind About Kenya 🇰🇪 and Rwanda 🇷🇼

Edward Wonder
Edward Wonder
•
132K views 2 weeks ago
10:01 Now playing

10 Easy Shortcuts Everybody Needs to Know in 2020

BRIGHT SIDE
BRIGHT SIDE
Verified
•
2.5M views 3 years ago
49:41 Now playing

Dolce Amore Episode 42 الدراما الفلبينية حلاوة الحب حـ

قناة الحبيبي Habibi Channel
قناة الحبيبي Habibi Channel
•
1.4K views 1 day ago
55:20 Now playing

THIS HAPPENED LIVE IN JOHN CHI'S CHURCH

Johnchi Ministries
Johnchi Ministries
Verified
•
1M views 2 months ago
12:29 Now playing

🔥Watch RUTO Fun moments with over 200 Kenya Kwanza leaders

Latest News Network KE
Latest News Network KE
•
63K views 17 hours ago
10:36 Now playing

5 Projects You Can Build In A Week That Will Get You Hired

Web Dev Simplified
Web Dev Simplified
Verified
•
736K views 2 years ago
10:57 Now playing

Most Humiliating Skills in Football History

EGol7
EGol7
Verified
•
11M views 1 year ago
17:06 Now playing

Here's How The 12 Apostles Actually Died!

Origins Explained
Origins Explained
Verified
•
944K views 4 months ago
9:38 Now playing

5 JavaScript Concepts You HAVE TO KNOW

James Q Quick
James Q Quick
Verified
•
973K views 1 year ago
8:06 Now playing

CRAZIEST Goal Celebrations In Women's Football

WF Comps
WF Comps
•
1.5M views 1 month ago
4:30 Now playing

President-elect William Ruto meets all elected leaders under the Kenya Kwanza Alliance

KTN News Kenya
KTN News Kenya
Verified
•
63K views 12 hours ago
Now playing

PROPHETIC HOUR OF PRAYER[PHP]. BEGINNING YOUR DAY WITH GOD AND YOUR PROPHET, 18TH AUGUST 2022

Edeywork ministry
Edeywork ministry
•
101 watching
LIVE

•
Tailwind Crash Course | Project From Scratch
If playback doesn't begin shortly, try restarting your device.
Includes paid promotion
5 seconds
Getting Started
3:29
15:01
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
Up next
Live
Upcoming
Play Now
Switch camera
Share
An error occurred while retrieving sharing information. Please try again later.
0:00
1:35:38
13:23 / 1:35:38•Watch full video

Chapters

Intro

0:00

Getting Started

2:45

Install & Setup Tailwind CLI

4:58

NPM Scripts & Output

7:39

Customizing & Config

11:00

Navigation Area + Spacing, Flex, Responsive Classes, etc

13:25

Hero Section

24:06

Class Name Order Convention

30:43

Features Section

33:44

Testimonial Section

44:58

CTA Section

54:15

Footer

59:34

Hamburger Menu HTML

1:10:59

Custom CSS (Background SVGs)

1:15:38

Custom CSS (Hamburger Menu)

1:19:45

Menu JavaScript

1:25:08

Deploy To InMotion Hosting

1:28:27
Sync to video time

Description

In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git. ⭐ Sponsor: InMotion Hosting! https://bit.ly/3uVNhD6 💻 Code: https://github.com/bradtraversy/tailw... Frontend Mentor Challenge: https://www.frontendmentor.io/challen... Csaba Kissi Twitter (Tailwind Course Helper): https://twitter.com/csaba_kissi 👇 Website & Courses: https://traversymedia.com 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 0:00 - Intro 2:45 - Getting Started 4:58 - Install & Setup Tailwind CLI 7:39 - NPM Scripts & Output 11:00 - Customizing & Config 13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc 24:06 - Hero Section 30:43 - Class Name Order Convention 33:44 - Features Section 44:58 - Testimonial Section 54:15 - CTA Section 59:34 - Footer 1:10:59 - Hamburger Menu HTML 1:15:38 - Custom CSS (Background SVGs) 1:19:45 - Custom CSS (Hamburger Menu) 1:25:08 - Menu JavaScript 1:28:27 - Deploy To InMotion Hosting
Show less Show more

Chapters
View all

Intro

0:00

Getting Started

2:45

Install & Setup Tailwind CLI

4:58

NPM Scripts & Output

7:39

Featured playlist

85 videos
Programming & Web Development Crash Courses
Traversy Media

Comments 254

Top comments
Newest first

Transcript

NaN / NaN

Tailwind Crash Course | Project From Scratch

172,974 views Apr 5, 2022 In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying …Show more
Show more

Chapters
View all

Intro

0:00

Getting Started

2:45

Install & Setup Tailwind CLI

4:58

NPM Scripts & Output

7:39

Customizing & Config

11:00

Navigation Area + Spacing, Flex, Responsive Classes, etc

13:25

Featured playlist

85 videos
Programming & Web Development Crash Courses
Traversy Media
Show less
4.7K
Dislike
I dislike this
Share
Share
Download
Download
Clip
Clip
Save
Save
Traversy Media
Traversy Media
Verified
1.92M subscribers
Subscribe
Comments
254
Macho Man
Thank you for the continuous content Brad! I wouldn’t be the developer I am today without your videos

Tailwind Crash Course | Project From Scratch

172,974 views172K views
Apr 5, 2022
4.7K
Dislike
Share
Download
Clip
Save
Traversy Media
Traversy Media
Verified
1.92M subscribers
Subscribe
In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git. ⭐ Sponsor: InMotion Hosting! https://bit.ly/3uVNhD6 💻 Code: https://github.com/bradtraversy/tailw... Frontend Mentor Challenge: https://www.frontendmentor.io/challen... Csaba Kissi Twitter (Tailwind Course Helper): https://twitter.com/csaba_kissi 👇 Website & Courses: https://traversymedia.com 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 0:00 - Intro 2:45 - Getting Started 4:58 - Install & Setup Tailwind CLI 7:39 - NPM Scripts & Output 11:00 - Customizing & Config 13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc 24:06 - Hero Section 30:43 - Class Name Order Convention 33:44 - Features Section 44:58 - Testimonial Section 54:15 - CTA Section 59:34 - Footer 1:10:59 - Hamburger Menu HTML 1:15:38 - Custom CSS (Background SVGs) 1:19:45 - Custom CSS (Hamburger Menu) 1:25:08 - Menu JavaScript 1:28:27 - Deploy To InMotion Hosting

Chapters
View all

Intro

0:00

Getting Started

2:45

Install & Setup Tailwind CLI

4:58

NPM Scripts & Output

7:39

Featured playlist

85 videos
Programming & Web Development Crash Courses
Traversy Media
Show less Show more
All From your search CSS Related From Traversy Media

Backbone of Business in 2022

Download The State of Communication and see what poor communication does to productivity.
Ad
grammarly.com
VISIT SITE
15:01 Now playing

Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose?

Academind
Academind
Verified
•
185K views 4 years ago
1:40:30 Now playing

JavaScript Crash Course For Beginners

Traversy Media
Traversy Media
Verified
•
2.9M views 3 years ago
8:49 Now playing

Most Impossible Comebacks - English Commentary

NostBall
NostBall
•
1.7M views 8 months ago
17:14 Now playing

Guide To Becoming A Self-Taught Software Developer

Traversy Media
Traversy Media
Verified
•
774K views 2 years ago
8:43 Now playing

The Day Cristiano Ronaldo SILENCED The Commentator

BR7 Football
BR7 Football
Verified
•
4.6M views 4 months ago
14:29 Now playing

The Day Ronaldinho Showed Zidane Who Is The Boss.

RDHDComps
RDHDComps
Verified
•
3.9M views 3 months ago
52:27 Now playing

TypeScript Crash Course

Traversy Media
Traversy Media
Verified
•
367K views 11 months ago
10:02 Now playing

Imagine if all these were scored by Cristiano Ronaldo

Legasus
Legasus
Verified
•
3.2M views 3 years ago
Now playing

Mix - Traversy Media

More from this channel for you
More from this channel for you
•
40:02 Now playing

Unlocking the Old Testament Part 8 - Exodus 1

David Pawson - Official
David Pawson - Official
•
154K views 7 years ago
24:38 Now playing

Python Tutorial for Absolute Beginners #1 - What Are Variables?

CS Dojo
CS Dojo
Verified
•
8M views 4 years ago
1:03:21 Now playing

👩‍💻 Python for Beginners Tutorial

Kevin Stratvert
Kevin Stratvert
Verified
•
883K views 1 year ago
10:39 Now playing

Greatest World Record In Football

GrdArena
GrdArena
•
8.2M views 3 months ago
10:34 Now playing

People laughed at a millionaire with a broken iPhone! Later, they were SHOCKED! Sadio Mane's story…

Life Stories
Life Stories
•
1.9M views 8 months ago
8:27 Now playing

Heartbreaking Football Moments💔

Fazzer HD
Fazzer HD
Verified
•
2.2M views 1 month ago
9:04 Now playing

Impossible Records

AshStudio7
AshStudio7
Verified
•
4.5M views 3 weeks ago
8:11 Now playing

99% of Players Can't Do This..

AshStudio7
AshStudio7
Verified
•
1.2M views 2 weeks ago
8:55 Now playing

Jose Mourinho Will Never Forget This Manchester United Revenge

GrdArena
GrdArena
•
323K views 3 weeks ago
53:45 Now playing

CSS Grid Crash Course 2022

Traversy Media
Traversy Media
Verified
•
141K views 5 months ago
8:06 Now playing

Comedy Football! Funny Moments #7

Soccer90v
Soccer90v
Verified
•
9.9M views 4 months ago
Show more

254 Comments

Sort comments
Sort by
Top comments
Newest first
Lameck Mokua
Commenting publicly as Lameck Mokua
Macho Man

Macho Man

4 months ago
Thank you for the continuous content Brad! I wouldn’t be the developer I am today without your videos
Show less Read more
117
117
❤ by Traversy Media
Reply
4 REPLIES
4 REPLIES
Waleed Mumtaz

Waleed Mumtaz

4 months ago (edited)
Brad mentions about putting your Tailwind CSS classes such as sm, md, and lg at the end. There is a plugin by Tailwind Labs itself called "Prettier Plugin for Tailwind CSS". You can install this plugin in your project and it takes care of the sorting of your Tailwind classes.
Show less Read more
62
62
❤ by Traversy Media
Reply
Traversy Media
· 2 REPLIES
· 2 REPLIES
Sajjad F

Sajjad F

4 months ago (edited)
Special thanks to you, Brad for this extremely valuable and rare content.
Show less Read more
5
5
Reply
Glen Allen

Glen Allen

4 months ago
I love the longer videos actually completing something, really feels like you have something to work of. As always great video thanks Brad
Show less Read more
3
3
Reply

Nicholas Robbins

4 months ago
I usually don't comment on videos but really want to say thank you Brad for the tremendous amount of work you're doing in the software community. Following along step-by-step with these projects really helps show what these frameworks can do. It's a big ask, but it would be amazing if we did a project like this in the future but completed additional pages so we had a legit 4-5 page website that would truly be a "Job Ready" project in the sense, like maybe show how we build this one page and then copy certain elements to create a Product page, or a About Us page that was fleshed out even more. Regardless, you're changing people's lives and I thank you immensely for the work you're doing dude!
Show less Read more
4
4
Reply

Mohit Singh

4 months ago
Awesome video. Keep it coming. One suggestion, use the vs code extension for tailwind it will make your life much easier while development
Show less Read more
5
5
Reply

Rodrigo Lima

4 months ago
The best tutorial about Tailwind ever! Thank you for providing us with this amazing content!!!
Show less Read more
3
3
Reply

Redemple Marcelo

4 months ago
This is my favourite channel. I especially like it when you explain everything so nicely. I wish you a lot of success with the channel and happy life. ❤️
Show less Read more
0
0
Reply

Charles De Barros

10 days ago
As always, outstanding content! We are very lucky in the development community to have people like you, generous, and willing to share content so as everyone can learn. Thank you.
Show less Read more
0
0
Reply

Bruna Contino

4 months ago
Thank you so much Brad! I have one small favor to ask: could you please update the codes for your Udemy courses? I think they are not valid anymore :/
Show less Read more
0
0
Reply

Nils Koch

4 months ago
Great content! Your videos are making my life so much better and easier, thank you!
Show less Read more
0
0
Reply

Anas Alhariri

4 months ago
Hi, Thank you so much for your great efforts. I really appreciate your tutorials. All the love and respect.
Show less Read more
0
0
Reply

Chad Caldwell

3 months ago
This was fantastic. Learning rather than copying. Very well done. Hope you do more.
Show less Read more
0
0
Reply

Elegant Coder

12 days ago
Finished this course it was amazing Brad is a great teacher
Show less Read more
0
0
Reply

LunarCodes

3 months ago
This channel has helped me ALOT in learning how to code, literally cannot believe that these videos are free. Keep up the good vids brotha
Show less Read more
2
2
Reply

codewithfarhad

3 months ago
great content as always but this leaves so much to be desired. please make a udemy course on tailwindcss alone! 😍
Show less Read more
0
0
Reply

Ryzle Salt

2 weeks ago
This was an awesome tutorial, loved it!
Show less Read more
0
0
Reply

juwono USK

1 month ago
Thank you for the amazing tutorial. This is the great explanation and easy for understanding video about tailwind css that I've seen. 🤩👍👍
Show less Read more
0
0
Reply

Tech_tips01

3 months ago
Really, I just decided to start using tailwind, and you immediately made a video, you basically teached me all about web development in less than 2 years thank you very much
Show less Read more
0
0
Reply

Misheru

1 month ago
Thank you for this project, i was able to learn a lot from it !
Show less Read more
0
0
Reply
Filters
Open search filters
1:35:39 Now playing

Tailwind Crash Course | Project From Scratch

Traversy Media
Traversy Media
Verified
•
172K views 4 months ago
Traversy Media
Traversy Media
Verified
In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility ... In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility ...
From the video description
0:05 Hey what's going on guys in this video we're going to build and deploy a tailwind css website now if you've never used tailwind ... Hey what's going on guys in this video we're going to build and deploy a tailwind css website now if you've never used tailwind ...
Automatic captions
30:31 Now playing

Tailwind CSS Crash Course

Traversy Media
Traversy Media
Verified
•
506K views 3 years ago
Traversy Media
Traversy Media
Verified
In this video we will look at the TailwindCSS utility framework including what it is, setup and creating custom components with ... In this video we will look at the TailwindCSS utility framework including what it is, setup and creating custom components with ...
From the video description
tailwind css | core concepts | installation | Install It with Npm | Install Tailwind Css | Build Command To Build Out the Css | Build Process | run build css | Base Components Utilities | Colors | Add a Color to the Body | Padding | Container | Extend these Utility Classes | Create an Alert Component | margin and padding | An Alert Component | Alert Component | Card Component | Add a Navbar Component
20 auto-generated moments in this video
20 moments

tailwind css

0:24

core concepts

1:55

installation

2:45

Install It with Npm

3:12

Install Tailwind Css

3:25

Build Command To Build Out the Css

4:06

Build Process

4:31
19 Now playing

Tailwind CSS Tutorial

The Net Ninja
The Net Ninja
Verified
•
  • Tailwind CSS Tutorial #1 - Intro & Setup
    13:41
  • Tailwind CSS Tutorial #2 - HTML Template
    10:02
View full playlist
31:50 Now playing

Tailwind CSS v3.0 Crash Course

Raddy
Raddy
•
22K views 6 months ago
Raddy
Raddy
Today we are going to explore Tailwind CSS 3.0 TaiwindCSS is a utility-first CSS framework packed with easy to use pre-defined ... Today we are going to explore Tailwind CSS 3.0 TaiwindCSS is a utility-first CSS framework packed with easy to use pre-defined ...
From the video description
4K
Introduction | What is Tailwind CSS | Install Tailwind CSS | Design System | Taiwind Custom Fonts | Responsive Design | Responsive Design Using Flexbox (Example) | Taiwind Container | Responsive Design Using Grid (Example) | Extend Custom Class Names | Bye
11 chapters in this video
11 chapters

Introduction

0:00

What is Tailwind CSS

1:13

Install Tailwind CSS

6:03

Design System

8:34

Taiwind Custom Fonts

12:07

Responsive Design

13:30

Responsive Design Using Flexbox (Example)

16:44

People also watched

1:41:55 Now playing

HTML / CSS Tutorial – Create an Order Summary Component

freeCodeCamp.org
freeCodeCamp.org
Verified
•
111K views 7 days ago
freeCodeCamp.org
freeCodeCamp.org
Verified
Learn HTML and CSS by creating an order summary component. You can apply the concepts from this video to other types of ... Learn HTML and CSS by creating an order summary component. You can apply the concepts from this video to other types of ...
From the video description
Intro to HTML and CSS
44 chapters in this video
44 chapters

Intro

0:00

How websites work

2:26

Intro to HTML and CSS

5:05

What is a component?

6:45

Intro To Design Tools

9:51

Starter project files

11:31

Terminals

17:42
3:46:22 Now playing

Django / Tailwind Tutorial - Code a Netflix Clone

freeCodeCamp.org
freeCodeCamp.org
Verified
•
197K views 7 months ago
freeCodeCamp.org
freeCodeCamp.org
Verified
Improve your Django and Tailwind CSS skills by building a Netflix clone. The clone focuses on simulating the front end of Netflix. Improve your Django and Tailwind CSS skills by building a Netflix clone. The clone focuses on simulating the front end of Netflix.
From the video description
0:00 In this course from Oliver Otchere you will improve your Django and Tailwind CSS skills by creating a Netflix clone. You learn how ... In this course from Oliver Otchere you will improve your Django and Tailwind CSS skills by creating a Netflix clone. You learn how ...
Creator-provided subtitles/CC
CC
2:11:02 Now playing

🔴 Let's build Hulu 2.0 with REACT.JS! (Next.js, Tailwind CSS, Responsive)

Sonny Sangha
Sonny Sangha
Verified
•
244K views Streamed 1 year ago
Sonny Sangha
Sonny Sangha
Verified
Join me as I build Hulu 2.0 with TAILWIND CSS (with 2.1 JIT!) & NEXT.JS! Check out Hostinger (Use code SONNY for 7% OFF ... Join me as I build Hulu 2.0 with TAILWIND CSS (with 2.1 JIT!) & NEXT.JS! Check out Hostinger (Use code SONNY for 7% OFF ...
From the video description
Introduction | Build Showcase (1/2) | Hostinger Sponsorship | Build Showcase (2/2) | Next.js Introduction | Initialising the Build | Setting Up Tailwind CSS | Building the Header Component | Building the Header Items | Creating the Nav Component | Creating the Backend Request API | Building the Nav Component | Creating the Results Component | Building the Thumbnail Component | Building the Results Component | Final Build Demo | Deploying to Vercel | Hosting on Hostinger | Outro
19 chapters in this video
19 chapters

Introduction

0:00

Build Showcase (1/2)

0:51

Hostinger Sponsorship

4:37

Build Showcase (2/2)

6:47

Next.js Introduction

8:18

Initialising the Build

9:49

Setting Up Tailwind CSS

13:32
2:20:17 Now playing

🔥 Build NETFLIX With React JS - Tailwind CSS - FIREBASE - Front-End Web Developer Project

Code Commerce
Code Commerce
•
25K views 3 months ago
Code Commerce
Code Commerce
Build a project in React JS that will get you a job as a front-end web developer. I want to give you an example of a project idea you ... Build a project in React JS that will get you a job as a front-end web developer. I want to give you an example of a project idea you ...
From the video description
CC
Intro | Create react app | Install Tailwind CSS | Install project dependencies | Navbar component | React router dom | Home component | Main component | TMDB API key | API Request end points | Row component | Movie Component | Scroll functionality | Firebase setup | Authentication | Firestore database (save user data) | Hosting & Deploy
17 chapters in this video
17 chapters

Intro

0:00

Create react app

2:15

Install Tailwind CSS

3:08

Install project dependencies

4:05

Navbar component

7:40

React router dom

14:15

Home component

15:20
+6 more
7:47 Now playing

Should You Use Tailwind CSS?

Web Dev Simplified
Web Dev Simplified
Verified
•
205K views 1 year ago
Web Dev Simplified
Web Dev Simplified
Verified
Tailwind CSS is the most popular utility CSS framework, but should you use it? In this video I talk about what Tailwind CSS is, ... Tailwind CSS is the most popular utility CSS framework, but should you use it? In this video I talk about what Tailwind CSS is, ...
From the video description
Introduction | What Is Tailwind? | Tailwind Gives Flexibility | Adhoc Styles | Tailwind Imposes Design Limitations | Tailwind Is Easy To Customize | Tailwind Negatives
7 chapters in this video
7 chapters

Introduction

0:00

What Is Tailwind?

0:19

Tailwind Gives Flexibility

1:31

Adhoc Styles

2:35

Tailwind Imposes Design Limitations

3:46

Tailwind Is Easy To Customize

4:41

Tailwind Negatives

5:43
1:37:58 Now playing

Build & Deploy a Personal Portfolio with TailwindCSS - 2022 Edition

DesignCourse
DesignCourse
Verified
•
74K views 9 months ago
DesignCourse
DesignCourse
Verified
While we won't design it from scratch, I will spend 15 minutes talking about the design and the various sections that I think are ... While we won't design it from scratch, I will spend 15 minutes talking about the design and the various sections that I think are ...
From the video description
Introduction | Design Overview | Project Setup | Creating the Header | Hero Section | My Work Section | Clients Section | Hire me Section | JavaScript | Github | Creating an Account at Hostinger | Setting up Auto Git Deployment | Final Thoughts
13 chapters in this video
13 chapters

Introduction

0:00

Design Overview

2:54

Project Setup

18:34

Creating the Header

34:15

Hero Section

58:08

My Work Section

1:19:07

Clients Section

1:20:40
12:56 Now playing

Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar

Fireship
Fireship
Verified
•
579K views 9 months ago
Fireship
Fireship
Verified
#webdev #css #tutorial Resources Tailwind Docs https://tailwindcss.com/ Tailwind React Setup ... #webdev #css #tutorial Resources Tailwind Docs https://tailwindcss.com/ Tailwind React Setup ...
From the video description
4K
Intro | Should you use Tailwind? | Setup | JIT Mode | Functional CSS Basics | Flexible Container | Organize UI Components | Position a Sidebar | Customize Colors | Icon Buttons | Custom Classes with Apply | Pseudo-class Variants | Animation | Groups | Dark Mode
15 chapters in this video
15 chapters

Intro

0:00

Should you use Tailwind?

0:54

Setup

1:42

JIT Mode

2:48

Functional CSS Basics

3:20

Flexible Container

4:06

Organize UI Components

4:41
1:33:45 Now playing

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

Lama Dev
Lama Dev
Verified
•
27K views 2 months ago
Lama Dev
Lama Dev
Verified
0:00 Introduction 02:19 Tailwind Crash Course for Beginners 16:41 How to Install Tailwind 18:43 Tailwind Responsive Navbar ... 0:00 Introduction 02:19 Tailwind Crash Course for Beginners 16:41 How to Install Tailwind 18:43 Tailwind Responsive Navbar ...
From the video description
Introduction | Tailwind Crash Course for Beginners | How to Install Tailwind | Tailwind Responsive Navbar Design | Tailwind Hamburger Menu | Tailwind Responsive Positioning | About Me Section | Services Section | Tailwind Portfolio Section | Tailwind Contact Form | Footer | How to Scroll to a Div When Click on a Link | Tailwind Dark Mode Tutorial | How to Deploy a Tailwind Project | Outro
15 chapters in this video
15 chapters

Introduction

0:00

Tailwind Crash Course for Beginners

2:19

How to Install Tailwind

16:41

Tailwind Responsive Navbar Design

18:43

Tailwind Hamburger Menu

31:21

Tailwind Responsive Positioning

39:32

About Me Section

55:00

Shorts

tailwind css use Input design | #shorts

•
5.9K views

I copied google's input animation using tailwind css #Shorts

•
8.9K views

Quickest way to center a div - tailwind css

•
258 views

Free Tailwind CSS Components | Meraki UI | Swapnil Codes

•
1.9K views

amazing extension to increase your productivity with tailwind css! | #shorts

•
4.6K views

Why Tailwind CSS is better than Bootstrap? 🔥🔥🔥#Shorts

•
351 views
15:01 Now playing

Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose?

Academind
Academind
Verified
•
185K views 4 years ago
Academind
Academind
Verified
Should you use vanilla CSS (no framework), a component framework like Bootstrap or a utility framework like Tailwind CSS? Should you use vanilla CSS (no framework), a component framework like Bootstrap or a utility framework like Tailwind CSS?
From the video description
Intro | Styling a button | Bootstrap | Tailwind CSS | Summary
5 auto-generated chapters in this video
5 chapters

Intro

0:00

Styling a button

0:33

Bootstrap

4:00

Tailwind CSS

6:35

Summary

9:03
10:25 Now playing

Bootstrap vs Tailwind CSS | Which is the BEST CSS Framework?

codedamn
codedamn
Verified
•
26K views 9 months ago
codedamn
codedamn
Verified
Timestamps 0:00 Teaser 0:15 Video Starts 2:00 Tailwind CSS v/s Bootstrap 6:44 Tailwind's JIT 7:44 What do you prefer? 9:31 ... Timestamps 0:00 Teaser 0:15 Video Starts 2:00 Tailwind CSS v/s Bootstrap 6:44 Tailwind's JIT 7:44 What do you prefer? 9:31 ...
From the video description
Teaser | Video Starts | Tailwind CSS v/s Bootstrap | Tailwind’s JIT | What do you prefer? | Conclusion | Outro
7 chapters in this video
7 chapters

Teaser

0:00

Video Starts

0:15

Tailwind CSS v/s Bootstrap

2:00

Tailwind’s JIT

6:44

What do you prefer?

7:44

Conclusion

9:31

Outro

10:04
1:25:21 Now playing

Modern Landing Page Tailwind CSS Project

Coding in Public
Coding in Public
•
16K views 4 months ago
Coding in Public
Coding in Public
In this video, I'll help you get started with Tailwind 3 CSS. 1. I'll give you a basic overview of how Tailwind works. 2. Show you how ... In this video, I'll help you get started with Tailwind 3 CSS. 1. I'll give you a basic overview of how Tailwind works. 2. Show you how ...
From the video description
4K
Introduction | Tailwind CSS Basics | Project Setup | Navigation Menubar | Header | Card Section | Partner Section | Home CTA Section | Form Section
9 chapters in this video
9 chapters

Introduction

0:00

Tailwind CSS Basics

2:24

Project Setup

12:32

Navigation Menubar

16:50

Header

38:35

Card Section

42:50

Partner Section

53:22
2:38:46 Now playing

Tailwind Complete Course For Beginner to Advanced - [2021]

Daily Tuition
Daily Tuition
Verified
•
78K views 1 year ago
Daily Tuition
Daily Tuition
Verified
Tailwind Complete Course For Beginner to Advanced - [2021] In this course, we will look at Tailwind CSS in detail. we will look at ... Tailwind Complete Course For Beginner to Advanced - [2021] In this course, we will look at Tailwind CSS in detail. we will look at ...
From the video description
1:36:50 Intelven now intel wins css version 2 introduce a new just-in-time compiler for tailwind css that generates your style on demand ... Intelven now intel wins css version 2 introduce a new just-in-time compiler for tailwind css that generates your style on demand ...
Automatic captions

For you

11:30:53 Now playing

Learn HTML5 and CSS3 From Scratch - Full Course

freeCodeCamp.org
freeCodeCamp.org
Verified
•
4.8M views 3 years ago
freeCodeCamp.org
freeCodeCamp.org
Verified
HTML and CSS are essential skills to have for a career in web development. In this course we will cover both languages from the ... HTML and CSS are essential skills to have for a career in web development. In this course we will cover both languages from the ...
From the video description
CC
hello world | hello my name is john | proper structure | I'm heading 1
4 auto-generated moments in this video
4 moments

hello world

29:12

hello my name is john

32:38

proper structure

40:19

I'm heading 1

41:46
46:54 Now playing

Flexbox Crash Course 2022

Traversy Media
Traversy Media
Verified
•
212K views 6 months ago
Traversy Media
Traversy Media
Verified
Flexbox is used for space distribution, positioning and alignment in CSS. Project Code: ... Flexbox is used for space distribution, positioning and alignment in CSS. Project Code: ...
From the video description
Setup HTML & Base CSS
16 chapters in this video
16 chapters

Intro & Slides

0:00

Setup HTML & Base CSS

5:05

Create a Flexbox Container

7:50

Float Example

8:20

Justify Content

9:49

Align Items

11:05

Align Self

11:39
11:08:07 Now playing

CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours

Dave Gray
Dave Gray
•
60K views 4 weeks ago
Dave Gray
Dave Gray
This CSS Full Course for Beginners is an all-in-one beginner tutorial and complete course full of over 11 hours of CSS code and ... This CSS Full Course for Beginners is an all-in-one beginner tutorial and complete course full of over 11 hours of CSS code and ...
From the video description
Intro | Chapter 1: Start Here | Chapter 2: Selectors | Chapter 3: Colors | Chapter 4: Units & Sizes | Chapter 5: Box Model | Chapter 6: Typography | Chapter 7: Styling Links | Chapter 8: List Styles | Chapter 9: Mini Project | Chapter 10: Display | Chapter 11: Floats | Chapter 12: Columns | Chapter 13: Position | Chapter 14: Flexbox | Chapter 15: Grid Layout | Chapter 16: Images | Chapter 17: Media Queries | Chapter 18: Card Project | Chapter 19: Pseudo | Chapter 20: Variables | Chapter 21: Functions | Chapter 22: Animations | Chapter 23: Organization | Chapter 24: Final Project
25 chapters in this video
25 chapters

Intro

0:00

Chapter 1: Start Here

0:41

Chapter 2: Selectors

14:23

Chapter 3: Colors

34:14

Chapter 4: Units & Sizes

50:46

Chapter 5: Box Model

1:11:29

Chapter 6: Typography

1:36:41
+14 more
9 Now playing

Tailwind CSS v2.0: From Zero to Production

Tailwind Labs
Tailwind Labs
•
  • 00: Course Intro – Tailwind CSS v2.0: From Zero to Production
    1:12
  • 01: Setting Up Tailwind CSS v2.0 – Tailwind CSS v2.0: From Zero to Production
    10:02
View full playlist
3:46:20 Now playing

🔴 Let's build Deliveroo 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)

Sonny Sangha
Sonny Sangha
Verified
•
144K views Streamed 1 month ago
Sonny Sangha
Sonny Sangha
Verified
--- The much anticipated build is FINALLY HERE! Join me as I build the DELIVEROO CLONE with REACT NATIVE (yes we're ... --- The much anticipated build is FINALLY HERE! Join me as I build the DELIVEROO CLONE with REACT NATIVE (yes we're ...
From the video description
Introduction | Build Showcase | Build Explanation (1/2) | Sanity Sponsorship | Build Explanation (2/2) | Expo Explanation | Setting Up Expo | Setting Up Tailwind CSS | Live Debugging | Setting Up React Native Navigation | Building the Home Screen | Building the Header Section of the Home Screen (1/2) | Implementing Heroicons | Building the Header Section of the Home Screen (2/2) | Building the Body Section of the Home Screen | Building the Categories of the Body Section (1/2) | Live Debugging Again! | Building the Categories of the Body Section (2/2) | Building the Featured Rows of the Body Section | Implementing Sanity | Adding and Changing Sanity Schemas | Adding Data in Sanity Studio (1/2) | GROQ Explanation | Querying in Sanity Studio (2/2) | Pulling Data from Sanity Studio | Building the Restaurant Screen | Building the Restaurant Info Section in the Restaurant Screen | Building the Menu Section in the Restaurant Screen | Building the Dish Rows in the Menu Section | Explaining and Implementing Redux | Implementing Add to Basket Functionality | Building the Basket Pop Up | Building the Basket Screen (1/2) | Implementing Grouping Menu Items Functionality | Building the Basket Screen (2/2) | Building the Placing Order Screen with Animations | Building the Delivery Screen (1/2) | Implementing the Map and Pin Functionality | Building the Delivery Screen (2/2) | Final Build Explanation and Demo | Outro
41 chapters in this video
41 chapters

Introduction

0:00

Build Showcase

1:05

Build Explanation (1/2)

3:17

Sanity Sponsorship

4:49

Build Explanation (2/2)

6:45

Expo Explanation

8:23

Setting Up Expo

9:39
2:32:07 Now playing

Tailwind CSS Tutorial for Beginners - Full Course

Scrimba
Scrimba
•
78K views 2 years ago
Scrimba
Scrimba
Learn Tailwind CSS with Victor Gonzalez Full interactive course on Scrimba: https://rebrand.ly/gtailwind During this course, we ... Learn Tailwind CSS with Victor Gonzalez Full interactive course on Scrimba: https://rebrand.ly/gtailwind During this course, we ...
From the video description
Welcome to the Tailwind CSS course | Background Classes & Shades | Element Sizing & Tailwind's Numbering System | Shades of Blue Challenge | Padding & Margins | Styling Text Part 1 | Styling Text Part 2 | Text Styling | Borders | The Buttons Challenge | Display Modes | Flexbox | Block Gallery Challenge | Responsive Design | Hover Modifier | Focus Modifier | Combination Modifier | Other Utilities | Input Component Challenge | Employee Card Challenge | Final Course Project - Landing Page | It's A Wrap!
22 chapters in this video
22 chapters

Welcome to the Tailwind CSS course

0:00

Background Classes & Shades

4:16

Element Sizing & Tailwind's Numbering System

8:40

Shades of Blue Challenge

14:51

Padding & Margins

17:07

Styling Text Part 1

22:45

Styling Text Part 2

28:45
2:17:37 Now playing

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

JavaScript Mastery
JavaScript Mastery
Verified
•
110K views 5 days ago
JavaScript Mastery
JavaScript Mastery
Verified
... and their reusability - React file and folder structure - You'll achieve mastery using Tailwind CSS - Fundamental CSS properties ... ... and their reusability - React file and folder structure - You'll achieve mastery using Tailwind CSS - Fundamental CSS properties ...
From the video description
1:50 ... and their reusability react file and folder structure you'll achieve mastery using tailwind css fundamental css properties to master ... ... and their reusability react file and folder structure you'll achieve mastery using tailwind css fundamental css properties to master ...
Automatic captions
New
2:03:26 Now playing

Build a React JS Website with Tailwind CSS - Beginner Tutorial Learning Tailwind CSS

Code Commerce
Code Commerce
•
43K views 5 months ago
Code Commerce
Code Commerce
Follow along and build this "Cloud Management" front in website using React JS and Tailwind CSS. I'm having a great time ... Follow along and build this "Cloud Management" front in website using React JS and Tailwind CSS. I'm having a great time ...
From the video description
Install tailwind | Navbar Component | Navbar | Minimum Width | Nav bar | Create a Hamburger Menu | Buttons | Add an on Click Button | Ternary Operator | Drop Down Menu | Import Images React | Hero icon | Database icon | Hero Icons | Icon | Notifications | Styling | Columns | Footer | Mobile Menu
20 auto-generated moments in this video
20 moments

Install tailwind

4:26

Navbar Component

8:16

Navbar

10:34

Minimum Width

13:15

Nav bar

18:39

Create a Hamburger Menu

20:39

Buttons

22:59
42:27 Now playing

Your First Tailwind Website

Traversy Media
Traversy Media
Verified
•
110K views 2 years ago
Traversy Media
Traversy Media
Verified
Tailwind CSS is a utility-first framework that's a little different than CSS frameworks like Bootstrap or Bulma. We are going to build ... Tailwind CSS is a utility-first framework that's a little different than CSS frameworks like Bootstrap or Bulma. We are going to build ...
From the video description
0:07 In this video we're going to learn about the tailwind css framework by building out this pretty simple landing page so there's a lot ... In this video we're going to learn about the tailwind css framework by building out this pretty simple landing page so there's a lot ...
Automatic captions
16 Now playing

Tailwind CSS Tutorials in Hindi

CodeWithHarry
CodeWithHarry
Verified
•
  • Introduction to Tailwind CSS & Utility first Workflow: Tailwind Tutorial #1
    18:00
  • Our First Tailwind CSS Website: Tailwind Tutorial #2
    28:02
View full playlist
26:33 Now playing

What's new in Tailwind CSS v3.0?

Tailwind Labs
Tailwind Labs
•
160K views 8 months ago
Tailwind Labs
Tailwind Labs
In this video, I'll show you some of the exciting new features added in Tailwind CSS v3.0. Release notes: ... In this video, I'll show you some of the exciting new features added in Tailwind CSS v3.0. Release notes: ...
From the video description
Intro | Just-in-Time, all the time | Even more colors out of the box | Colored box shadows, finally | Print modifier | Native aspect-ratio | Comprehensive scroll snap support | Scroll behavior | Multi-column layout | Accent color & file inputs | Styling open/closed states | Fancy underlines | Arbitrary properties | Play CDN | Outro
15 chapters in this video
15 chapters

Intro

0:00

Just-in-Time, all the time

0:10

Even more colors out of the box

2:55

Colored box shadows, finally

3:28

Print modifier

5:16

Native aspect-ratio

7:42

Comprehensive scroll snap support

10:28